<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="#">WMS</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Outbound</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Inventory Commitment</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Build Commitment</a>
        </li>
    </ul>
</div>
<div class="portlet light bordered" style="margin:15px">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold">Build Commitment</span>
        </div>
    </div>
    <div class="portlet-body form form-horizontal">
        <order-search-form is-loading="isLoading" order="searchParam" for-build-commitment="true" search-orders="searchOrders(searchParam)"></order-search-form>
        <div class="portlet light" style="padding:12px 0px 0px 0px;">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject bold"> Search Results</span> | Estimated Weight: {{totalSelectWeight}}
                </div>
                <div class="actions" style="line-height: 30px;">
                    <a class="caption-subject bold" ng-click="downLoadLongHaulData()"> Download LongHaul Data</a> |
                    <a class="caption-subject bold" ng-click="selectAll()"> Select All</a> |
                    <a class="caption-subject bold" ng-click="viewOrCloseDetail(viewOrClose)"> {{viewOrClose}} Details</a>

                        <waitting-btn type="button" btn-class="btn blue" style="float:right;margin-left:10px;"
                                      ng-click="commit()"
                                      value="submitLabel" is-loading="loading">
                        </waitting-btn>
                </div>
            </div>
            <div ng-show="isLoading" class="text-center">
                <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
            </div>
            <div ng-show="exporting" class="text-center">
                <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;Downloading...</span>
            </div>
            <div class="portlet-body" ng-show="!isLoading">
                <pager total-count="paging.totalCount" current-page ="paging.pageNo" page-size="pageObj.pageSize"  load-content="loadContent(currentPage)" current-page="pageObj.currentPage"></pager>
                <div class="panel panel-default bordered box-shadow-none"
                     ng-repeat="order in orders" ng-show="orderItemLineMap[order.id].length>0">
                    <div class="panel-heading" style="padding-bottom: 0;border-bottom:0;padding-top: 0px;">
                        <div class="portlet light box-shadow-none">
                            <div class="portlet-title" style="margin-bottom: 0;min-height: 32px;">
                                <div class="caption">
                                    <span class="caption-subject bold">
                                        <input id="check-{{$index}}" ng-checked="isChecked(order)" ng-click="checkOrUncheck(order)"
                                               type="checkbox" style="padding-top:3px;">
                                        <label for="check-{{$index}}">Order:<a ng-href="{{'#/wms/outbound/order/' + order.id}}" target="_blank">{{order.id}}</a> | Estimated Weight: </label><b>{{order.totalWeight}} {{order.weightUnit}}</b>
                                    </span>
                                    <span ng-if="judgeHasEmptyLPTemplateWithCustomerSetting(order)" style="background: #e5e5a0;padding: 2px 3px;">
                                        <label style="font-size: 14px;"><i class="fa fa-warning tooltips lt-tooltip" style="color:#eca243;"></i> No LP Configuration Found For Some Itemlines.</label></span>
                                </div>
                                <div class="actions" style="padding-bottom: 6px;">
                                    <a href="javascript:;" ng-click="showIn($index)"> Show/Hide Order</a>
                                </div>
                            </div>
                            <div class="portlet-body" style="padding-left:20px;">
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <span class="bold">Reference:</span>{{order.referenceNo}}
                                    </div>
                                    <div class="col-md-3">
                                          <span class="bold">Status:</span>
                                          <span ng-class="{'font-red':order.status == 'Commit Blocked'}">{{order.status}}</span>
                                    </div>
                                    <div class="col-md-3">
                                        <span class="bold">Customer:</span>{{organizations[order.customerId].name}}
                                    </div>
                                    <div class="col-md-3">
                                        <span class="bold">Is Rush:</span>
                                        <span ng-class="{'font-red':order.status == 'Commit Blocked'}">{{order.isRush?'Yes':'No'}}</span>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3">
                                        <span class="bold">Purchase Order No.:</span>
                                            {{order.poNo}}
                                    </div>
                                    <div class="col-md-3">
                                        <span class="bold">Delivery Request Date:</span>{{order.mabd | amDateFormat:'YYYY-MM-DD'}}
                                    </div>
                                    <div class="col-md-3">
                                        <span class="bold">Order Type:</span>{{order.orderType}}
                                    </div>
                               
                                </div>
                                 <div class="row form-group">
                                    <div class="col-md-3">
                                        <span class="bold">Delivery Service:</span>
                                            {{order.deliveryService}}
                                    </div>
                                <div class="col-md-3">
                                    <span class="bold">Carrier:</span>{{order.carrierName}}
                                </div>
                            </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <label class="bold">Item:</label>
                                        <label>
                                            <ul class="list-unstyled list-inline" style="margin-bottom: 0px;">
                                                <li ng-repeat="item in orderItemLineMap[order.id]">
                                                    <item-display item="itemMap[item.itemSpecId]"></item-display>
                                                </li>
                                            </ul>
                                        </label>
                                    </div>
                                </div>
                                <div class="row" style="padding-bottom: 15px;">
                                    <div class="col-md-12">
                                        <span class="bold">ShipTo:</span>{{getAddressInfo(order.shipToAddress)}}
                                    </div>
                                </div>

                                <div class="row" style="padding-bottom: 15px;">
                                    <div class="col-md-12">
                                        <span class="bold">LongHaulNo:</span>
                                        <span ng-if="order.longHaulNo">{{order.longHaulNo.join(" | ")}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse {{getIn($index)}}">
                        <div class="panel-body">
                            <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" role="grid">
                                <thead>
                                <th>Item</th>
                                <th>UOM</th>
                                <th>QTY</th>
                                </thead>
                                <tbody>
                                <tr ng-repeat="item in orderItemLineMap[order.id]">
                                    <td><item-display item="itemMap[item.itemSpecId]"></item-display></td>
                                    <td>{{item.unitName}}</td>
                                    <td>{{item.qty}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <pager total-count="paging.totalCount" current-page ="paging.pageNo" page-size="pageObj.pageSize"  load-content="loadContent(currentPage)" current-page="pageObj.currentPage"></pager>
                <div class="row" style="padding: 0px 20px 20px 0px;">
                    <waitting-btn type="button" btn-class="btn blue" style="float:right;"
                                  ng-click="commit()"
                                  value="submitLabel" is-loading="loading">
                    </waitting-btn>
                </div>
            </div>
        </div>
    </div>
</div>
